<template>
  <div>
    <p>可以有多个子节点</p>
    <p>vue3.2 setup语法糖</p>
    <button @click="changeNum(-1)">-</button>
    <button @click="num++">{{ num }}</button>
    <button @click="changeNum()">+</button>
    <p v-for="item in list" :key="item">{{ item }}</p>
  </div>
</template>
<script setup>
// ref 定义一个值类型的响应式数据(引用类型也可以，但是不推荐)
// reactive 定义一个引用类型的响应式数据
import { ref ,reactive} from 'vue';
// 定义响应数据num 默认值是0
const num = ref(0);
// 定义一个方法修改num
// 定义方法直接定义一个函数即可
function changeNum(v=1){
  // 在script中访问修改num的值需要加上value
  num.value += v;
  // reactive 定义的数据访问不需要加value
  // Date.now() 获取当前时间戳
  list.push(Date.now());
}
const list = reactive(["张三","李四","王五"]);
</script>